<template>
  <div class="model-list">
    <cite>
      <button @click="setActiveModel(-1)" :disabled="modelIndex == 0">
        <i class="iconfont icon-zuo"></i>
      </button>
      <ul>
        <li
          v-for="item in models"
          :key="item.id"
          :class="{ active: activeModel == item }"
          @click="setActiveModel(item)"
        >
          <img
            :src="$getImageUrl(item.mask_image)"
            :style="{ backgroundColor: backgroundColor }"
            alt=""
          />
        </li>
        <!-- 
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li>
				<li><img :src="$getImageUrl('/data/zx/design/210U004/1.png')"></li> -->
      </ul>

      <button
        @click="setActiveModel(1)"
        :disabled="modelIndex == this.models.length - 1"
      >
        <i class="iconfont icon-you"></i>
      </button>
    </cite>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters("designer", {
      activeColor: "getActiveColor",
      activeModel: "getActiveModel",
      models: "getModels",
    }),

    backgroundColor() {
      if (this.activeColor) {
        return this.activeColor.color_num;
      } else {
        return "";
      }
    },

    modelIndex() {
      return Math.max(this.models.indexOf(this.activeModel), 0);
    },
  },

  watch: {
    activeModel(newval, oldval) {
      this.scrollToModel();
    },
  },
  methods: {
    setActiveModel(item) {
      let index = this.modelIndex;
      let active = null;

      if (item == -1) {
        // 向前
        active = this.models[index - 1] || this.models[0];
      } else if (item == 1) {
        // 向右
        active = this.models[index + 1] || this.models[this.models.length - 1];
      } else if (this.models.indexOf(item) >= 0) {
        active = item;
      }

      if (active && active != this.activeModel) {
        this.$store.commit("designer/SET_ACTIVE_MODEL", active);
      }
    },

    // 滚动距离
    scrollToModel() {
      let index = this.modelIndex;
      let warp = this.$el.querySelector("ul");
      let elem = this.$el.querySelectorAll("li")[index];

      let scrollTo = (form, to) => {
        let step = form + (to > form ? 1 : -1);
        let over = to > form ? step >= to : step <= to;

        warp.scrollLeft = form + step;

        !over && setTimeout((e) => scrollTo(step, to), 1);
      };

      if (warp && elem) {
        let outer = warp.getBoundingClientRect();
        let inner = elem.getBoundingClientRect();
        let scrollLeft = warp.scrollLeft;

        let max = warp.scrollWidth - outer.width;
        let min = 0;
        let left = inner.left - outer.left + scrollLeft;
        let toleft = parseInt(left + 0.5 * inner.width - 0.5 * outer.width);

        // 缓动到目标点
        scrollTo(scrollLeft, Math.min(max, Math.max(min, toleft)));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.model-list {
  position: relative;
  height: 66px;

  cite {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    overflow: hidden;
    font-size: 0;
    text-align: center;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  button {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 100%;
    background: none;
    border: none;
    padding: 0;

    &:nth-child(3) {
      left: auto;
      right: 0;
    }

    &:hover {
      color: #ea4c89;
    }

    &[disabled] {
      color: #ddd;
    }
  }
  ul {
    display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    white-space: nowrap;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0 5px;
    width: 64px;
    height: 64px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    &.active {
      border-color: #ea4c89;
      &:hover {
        border-color: #ea4c89;
      }
    }

    &:hover {
      border-color: #ea4c89;
    }
  }
}
</style>
